import React, { useEffect, useState } from "react";
import { NavBar, ImageUploader, Toast, Button, Input } from "antd-mobile";
import { LoadingOutlined, PlusOutlined } from "@ant-design/icons";
import { useNavigate } from "react-router-dom";
import axios from "axios";
import { Upload, Flex, message } from "antd";
export default function Xiu() {
  const navigate = useNavigate();
  // 
  const id = JSON.parse(localStorage.getItem("user"));
  const [name, setName] = useState("");
  const [img, setImg] = useState("");
  const back = () => {
    navigate(-1);
  };
  const getlist = () => {
    axios.get(`http://127.0.0.1:3000/indexu?id=`+id,).then((res) => {
      const data = res.data.data[0];

      setName(data.username);
      setImg(data.image);
    });
  };

  // 上传图片
  const beforeUpload = (file) => {
    const isJpgOrPng = file.type === "image/jpeg" || file.type === "image/png";
    if (!isJpgOrPng) {
      message.error("You can only upload JPG/PNG file!");
    }
    return;
  };
  const [loading, setLoading] = useState(false);
  const [imageUrl, setImageUrl] = useState();
  const handleChange = (info) => {
    console.log(info,11111111111111);
    // setImageUrl(info.file.response)
    if(flag){
      Toast.show({
        content:'不能上传图片，点击编辑按钮才能上传图片'
      })
      return
    }
    if (info.file.status === "uploading") {
      setLoading(true);
      return;
    }
    if (info.file.status === "done") {
      // setImageUrl(info.file.name)
      // Get this url from response in real world.
      if (info.file.response && info.file.response.url) {
        setImageUrl(info.file.response.url);
      }
      setLoading(false);
    }
  };
  
  const [flag, setFlag] = useState(true);
  const editName=()=>{
    if(flag){
      Toast.show({
        content:'不能修改用户名,点击编辑按钮才能实现修改用户名'
      })
      return
    }
  }
  const save = () => {
    axios.post('http://localhost:3000/update',{id,image:imageUrl,username:name}).then(res=>{
      if(res.data.code===200){
        Toast.show({
          content:'修改成功'
        })
        localStorage.setItem('username',JSON.stringify(name))
        getlist()
      }
    })
    setFlag(false);
  };

  useEffect(() => {
    getlist();
  }, []);
  return (
    <div>
      <div>
        <NavBar back="返回" onBack={back}>
          修改个人信息
        </NavBar>
      </div>
      <div
        style={{
          display: "flex",
          flexDirection: "column",
          alignItems: "center",
          justifyContent: "center",
          padding: "20px",
        }}
      >
        {/*上传图片 */}
        <Upload
          name="avatar"
          listType="picture-circle"
          className="avatar-uploader"
          showUploadList={false}
          action="http://localhost:3000/upimg"
          beforeUpload={beforeUpload}
          onChange={handleChange}
        >
          {imageUrl ? (
            <img
              src={imageUrl}
              alt="avatar"
              style={{
                width: "100%",
                height: "100%",
                borderRadius: "50%",
                objectFit: "cover",
              }}
            />
          ) : (
            <img
              src={img}
              alt="avatar"
              style={{
                width: "100%",
                height: "100%",
                borderRadius: "50%",
                objectFit: "cover",
              }}
            />
          )}
        </Upload>
        <div
          style={{ textAlign: "center", fontSize: "20px", marginTop: "20px" }}
        >
          点击图片实现更改图片
        </div>
      </div>
      <div
        style={{
          display: "flex",
          flexDirection: "column",
          alignItems: "center",
          gap: "12px",
          padding: "16px",
          maxWidth: "400px",
          margin: "0 auto",
        }}
      >
        {/* Input 组件 */}
        <div style={{ width: "100%" }}>
          <Input
            placeholder="请输入内容"
            value={name}
            onChange={setName}
            style={{
              width: "100%",
              textAlign: "center",
            }}
            onFocus={editName}
          />
        </div>

        {/* 按钮组 */}
        <div
          style={{
            display: "flex",
            gap: "8px",
            justifyContent: "center",
            width: "100%",
          }}
        >
          {/* 编辑按钮 - 只在flag为true时显示 */}
          <Button
            color="primary"
            onClick={() => setFlag(false)}
            style={{ display: flag ? "block" : "none" }}
          >
            编辑
          </Button>

          {/* 保存按钮 - 只在flag为false时显示 */}
          <Button
            color="danger"
            onClick={save}
            style={{ display: flag ? "none" : "block" }}
          >
            保存
          </Button>

          {/* 取消按钮 - 只在flag为false时显示 */}
          <Button
            color="danger"
            onClick={() => {
              setFlag(true); // 恢复编辑按钮
              // 可以在这里添加取消时的重置逻辑
            }}
            style={{ display: flag ? "none" : "block" }}
          >
            取消
          </Button>
        </div>
      </div>
    </div>
  );
}